{% set seo_title = album.title %}
{% set seo_description = album.description %}
{% set scopes = 'scopes_detail' %}
{% extends "common.twig" %}
{% block style %}
<link href="//s.imcn.vip/css/lightgallery.min.css" rel="stylesheet">
<link rel="stylesheet" href="//s.imcn.vip/css/chromagallery.min.css?5">
{% endblock %}
{% block body %}
<div class="container" style="margin-top: 70px;margin-bottom:20px;">
    <div class="cn-detail">
        <h2>{{ album.title }}</h2>
        <hr>
        <div class="row" style="margin-left: 20px;margin-right: 20px;">
            <ul class="pull-left list-inline">
                <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ album.description }}</li>
                <li style="margin-top:30px;"><a target="_blank" href="/list.html" class="label label-success cn-lbl">{{ album.type.title }}</a></li>
                {% for tag in album.tag %}
                    <li style="margin-left: 20px;">
                        <a target="_blank" href="/list.html" class="label label-info cn-lbl">{{ tag.gttitle.title }}</a>
                    </li>
                {% endfor %}
            </ul>
            <ul class="list-inline pull-right" style="margin-top:-20px;">
                <li><span class="label label-info lbl-read" style="padding: 10px;" data-token="{{ token }}" data-id="{{ id }}">阅读（{{ album.visit_times }}）</span></li>
                <!--<li><span class="label label-info">评论（2）</span></li><li><button class="btn btn-success cn-love-detail" data-index="">喜欢（3）</button></li>-->
            </ul>
        </div>
    </div>
</div>
<div class="chroma-gallery mygallery">
    {% for cs in lists %}
        <img data-id="{{ cs.pd_id }}" class="img-responsive lazy" src="//s.imcn.vip/img/bgheng.jpg" data-original="{{ cs.small_resource }}" alt="<i class='fa fa-play-circle-o' style='font-size: 4em;'></i>">
    {% endfor %}
</div>
<ul id="lightgallery_ee" class="list-unstyled row" style="display:none;">
    {% for cs in lists %}
        <li class="col-md-4 col-xs-6 cn-li" data-responsive="{{ cs.small_resource }}" data-src="{{ cs.high_resource }}" style="margin-bottom:10px">
            <a href="" data-id="{{ cs.pd_id }}">
                <img class="img-responsive lazy cn-img" data-little="{{ cs.little_resource }}" data-original="{{ cs.small_resource }}" src="//s.imcn.vip/img/bgheng.jpg">
           </a>
            <div class="cn-heng">
                <a target="_blank" href="">
                    <i class="fa fa-play-circle-o"></i>
                </a>
           </div>
        </li>
    {% endfor %}
</ul>
{% endblock %}
{% block script %}
    <script src="//cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
    <script src="//s.imcn.vip/lib/lg/lightgallery.js"></script>
    <script src="//s.imcn.vip/lib/lg/lg-fullscreen.js"></script>
    <script src="//s.imcn.vip/lib/lg/lg-thumbnail.js"></script>
    <script src="//s.imcn.vip/lib/lg/lg-video.js"></script>
    <script src="//s.imcn.vip/lib/lg/lg-autoplay.js"></script>
    <script src="//s.imcn.vip/lib/lg/lg-zoom.js"></script>
    <script src="//s.imcn.vip/lib/lg/lg-hash.js"></script>
    <script src="//s.imcn.vip/lib/lg/lg-pager.js"></script>
    <script src="//s.imcn.vip/lib/lg/jquery.mousewheel.min.js"></script>

    <script src="//s.imcn.vip/lib/chromagallery.js"></script>
    <script src="//s.imcn.vip/lib/masonry.min.js"></script>
    <script src="//s.imcn.vip/lib/imagesloaded.min.js"></script>
    <script src="//s.imcn.vip/lib/modernizr-chrg.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".mygallery").chromaGallery({
            color: '#000',
            gridMargin: 15,
            maxColumns: 5,
            dof: true,
            screenOpacity: 0.8
        });
        var divClick = function(){
            var id = $(this).parent().find('img').attr('data-id');
            $("#lightgallery_ee a").each(function(){
		var n_id = $(this).attr('data-id');
		if (id == n_id) {
		    $(this).click();
	            return false;
                }
            });
        };
	var bindDiv = function(){
	    setTimeout(function(){
                var ll = $(".chrg-description").length;
                if (ll>6) {
                    $(".chrg-description").on('click', divClick);
		    return false;
                } else {
                    bindDiv();
                }
	    }, 100);
        };
        bindDiv();
    });
    </script>
{% endblock %}
